iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
2
Modern Web

JavaScript 初心者筆記系列 第 19

JavaScript 初心者筆記: DOM - 如何用 JS 更改 HTML & CSS 屬性

  • 分享至 

  • xImage
  •  

今天要接續昨天的主題,繼續談在選取 DOM 之後,有哪些語法可以動態更改 HTML 元素的屬性及 CSS 屬性。


增加 / 更改屬性的值 - setAttribute()

更改某標籤的屬性的值

先取得我們想操作的 DOM,並宣告變數
var el = document.querySelector('.titleClass a');
再用 setAttribute() 更改屬性的值,括號內分別要放 '要更改的屬性' 及 '要更改的值'
el.setAttribute('href','https://www.google.com.tw/');

動態增加 id

假如我有一個 class 叫做 .str,我想動態加上名為 strIdid

var el2 = document.querySelector('.str');
el2.setAttribute('id','strId');

讀取屬性的值 - getAttribute()

假如我有一個 a 連結名為 .titleClass,想要讀取該標籤內屬性的值

var el3 = document.querySelector('.titleClass a').getAttribute('href');
//用 console.log 去查,結果會是一串網址

修改 class 值 - className 特性

className 特性可用來變更 class 屬性值,如果屬性不存在,它會建立屬性並將指定的值設定於屬性中。注意,如果原本就有 class 值,再用 className 賦予值的話,會取代原本的 class 值,而不是將新的值加入既有的 class 名稱中。
document.querySelector('.titleClass').className = 新的 class 名稱;

處理多個 class 名稱 - classList 物件

classList 是 DOM 的一個唯讀屬性,但它本身也是一個物件,我們可以使用裡面的方法新增、刪除、修改節點上的 CSS class
假如有一個叫做 .myDiv 的元素,我想幫它多加一個 class 名(.mystyle),但如果用 className 特性來處理的話,添加新名稱會把原本 .myDiv 的名稱給覆蓋掉,這時就可以用 classList 物件裡的 add() 方法。
document.querySelector('.myDIV').classList.add('mystyle');

classList 物件中除了 add() 方法以外,還有 remove() / toggle() / contains() / length 屬性 / 索引值。
參考資料:JS基礎篇–HTML DOM classList 屬性HTML DOM classList 属性

修改 CSS 屬性 - style 物件

style 是 DOM 物件的一個特性,它本身也是一個物件。style 物件裡的特性跟 CSS 屬性是對應的,有些名稱相同,有些名稱不同,例如 CSS 的 font-size 屬性對應的 style 特性是 fontSize,而 display 屬性對應到 style 特性也是 display
document.querySelector('.titleClass').style.屬性名 = 值;


下集預告:如何用 JS 新增內容至 HTML /images/emoticon/emoticon29.gif


上一篇
JavaScript 初心者筆記: DOM - 如何用 JS 選取 HTML 元素
下一篇
JavaScript 初心者筆記: DOM - 如何用 JS 新增 HTML 內容
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言